<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/product.css">

    <style>
        a:hover {
            text-decoration: none;
        }

        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 容器 <div> - 需要定位下拉内容 */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* 下拉内容 (默认隐藏) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 600px;
            z-index: 888;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        /* 下拉菜单的链接 */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* 鼠标移上去后修改下拉菜单链接颜色 */
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        /* 在鼠标移上去后显示下拉菜单 */
        .dropdown:hover .dropdown-content {
            display: block;
        }


        /* 当下拉内容显示后修改下拉按钮的背景颜色 */
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }

        .acc{
            border: 2px solid silver;
            display:none;
            width: 100px;
            margin-bottom: 30px;
            float: left;
        }
    </style>

</head>
<body>
<div class="container-fluid" style="background-color: #F2F2F2;">
    <div class="row c">
        <div class="col-md-2"></div>
        <div class="col-md-1 c-filted">
            <a href="" style="color: white"><h4>FILTER</h4></a>
        </div>
        <div class="col-md-7"></div>
        <div class="col-md-2"></div>
    </div>
    <div class="row d">
        <div class="col-md-2"></div>
        <div class="col-md-8 d-photo">
            <div class="row">
                <div class="col-md-3">
                    <h3 style="font-weight: bolder">BRANDS</h3>
                    <ul class="d-ul list-unstyled" style="border-right:1px solid #5cb85c ;height: 200px;width: 200px">
                        <li id="abb" style="float: left;margin-right: 30px">
                            <div class="dropdown">
                                <button class="dropbtn">鞋帮</button>
                                <div class="dropdown-content">
                                    <a class="ban" style="float: left" href="#" onclick="ban(this);return false;">高帮</a>
                                    <a class="ban" style="float: left" href="#" onclick="ban(this);return false;">低帮</a>
                                </div>
                            </div>
                        </li>
                        <li id="abc" style="float: left">
                            <div class="dropdown">
                                <button class="dropbtn">材质</button>
                                <div class="dropdown-content">
                                    <a style="float: left" href="#" onclick="cai(this);return false;">合成革</a>
                                    <a style="float: left" href="#" onclick="cai(this);return false;">修面皮</a>
                                    <a style="float: left" href="#" onclick="cai(this);return false;">人造皮革</a>
                                    <a style="float: left" href="#" onclick="cai(this);return false;">太空革</a>
                                    <a style="float: left" href="#" onclick="cai(this);return false;">头层牛皮（除牛反绒）</a>
                                    <a style="float: left" href="#" onclick="cai(this);return false;">胶粘鞋</a>
                                </div>
                            </div>
                        </li>
                        <li id="abd">
                            <div class="dropdown">
                                <button class="dropbtn" style="width: 150px;margin-top: 30px;">品牌</button>
                                <div class="dropdown-content">
                                    <a style="float: left" href="#" onclick="pin(this);return false;">耐克（NIKE）</a>
                                    <a style="float: left" href="#" onclick="pin(this);return false;">阿迪达斯（adidas）</a>
                                    <a style="float: left" href="#" onclick="pin(this);return false;">蓝中鸟（LanZhongNiao）</a>
                                    <a style="float: left" href="#" onclick="pin(this);return false;">特步（XTEP）</a>
                                    <a style="float: left" href="#" onclick="pin(this);return false;">热风（Hotwind）</a>
                                    <a style="float: left" href="#" onclick="pin(this);return false;">威世米邦（WEISHIMIBANG）</a>
                                    <a style="float: left" href="#" onclick="pin(this);return false;">骆驼（CAMEL）</a>
                                </div>
                            </div>
                        </li>
                    </ul>

                </div>
                <div class="col-md-6 ">
                    <div class="row">
                        <div class="d-shoe col-md-4">
                            <div>
                                <h2>WOMAN</h2>
                                <a href="#" onclick="se(this);return false;" name="1"><img class="d-img"
                                                src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/img-w.jpg"
                                                alt=""></a>
                                <h4>TOTAL</h4>
                                <label>357 PRODUCTS</label>
                                <p><a href="#" onclick="se(this);return false;" name="1"><img
                                        src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/list-icon.png"
                                        alt="" style="width: 16px"></a></p>
                            </div>
                        </div>
                        <div class="d-shoe col-md-4">
                            <div>
                                <h2>MAN</h2>

                                <a href="#" onclick="se(this);return false;" name="2"><img class="d-img"
                                                src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/man-r-img.jpg"
                                                alt=""></a>
                                <h4>TOTAL</h4>
                                <label>357 PRODUCTS</label>
                                <p><a href="#" onclick="se(this);return false;" name="2"><img
                                        src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/list-icon.png"
                                        alt="" style="width: 16px"></a></p>
                            </div>
                        </div>
                        <div class="d-shoe col-md-4">
                            <div>
                                <h2>KIDS</h2>
                                <a href="#" onclick="se(this);return false;" name="3"><img class="d-img"
                                                src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/kid-r-img.jpg"
                                                alt=""></a>
                                <h4>TOTAL</h4>
                                <label>357 PRODUCTS</label>
                                <p><a href="#" onclick="se(this);return false;" name="3"><img
                                        src="http://demo2.cssmoban.com/cssthemes2/ftmp8_52_hb/images/list-icon.png"
                                        alt="" style="width: 16px"></a></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3" style="border-left: 1px solid red;height: 280px;padding-top: 40px">
                    <!--<img class="d-img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2996810576,291798969&fm=26&gp=0.jpg" style="padding-top: 20px" alt="">-->
                    <div id="ab" style="display:none;"><input type="text" class="acc" disabled id="abr"/><button style="float: left" onclick="btn1()">×</button></div>
                    <div style="clear: both"></div>
                    <div id="ac" style="display:none;"><input type="text"  class="acc"  disabled id="abt"/><button style="float: left" onclick="btn2()">×</button></div>
                    <div style="clear: both"></div>
                    <div id="ad" style="display:none;"><input type="text"  class="acc"  disabled id="aby"/><button style="float: left" onclick="btn3()">×</button></div>
                    <div style="clear: both"></div>
                    <div id="ae" style="display:none;"><input type="text"  class="acc"  disabled id="abu"/><button style="float: left" onclick="btn4()">×</button></div>
                    <div style="clear: both"></div>

                </div>
            </div>
        </div>
        <div class="col-md-2"></div>
    </div>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>

    function ban(obj) {
        /*console.log("11111")*/
        document.getElementById("abb").style.display = "none";
        var a = obj.innerText
        /*console.log(a)*/
        document.getElementById("abr").style.display="block";
        document.getElementById("ab").style.display = "block";
        document.getElementById("abr").value = a;

        var v = document.getElementById("abr").value;
        var b = document.getElementById("abt").value;
        var c = document.getElementById("aby").value;
        var e = document.getElementById("abu").value;
        var d=1;

        self.parent.frames["iframe3"].frames.GetChildValue(v,b,c,d,e);
    }

    function cai(obj) {
        /*console.log("11111")*/
        document.getElementById("abc").style.display = "none";
        var a = obj.innerText
        /*console.log(a)*/
        document.getElementById("abt").style.display="block";
        document.getElementById("ac").style.display = "block";
        document.getElementById("abt").value = a;

        var v = document.getElementById("abr").value;
        var b = document.getElementById("abt").value;
        var c = document.getElementById("aby").value;
        var e = document.getElementById("abu").value;
        var d=1;

        self.parent.frames["iframe3"].frames.GetChildValue(v,b,c,d,e);
    }

    function pin(obj) {
       /* console.log("11111")*/
        document.getElementById("abd").style.display = "none";
        var a = obj.innerText
        /*console.log(a)*/
        document.getElementById("aby").style.display="block";
        document.getElementById("ad").style.display = "block";
        document.getElementById("aby").value = a;

        var v = document.getElementById("abr").value;
        var b = document.getElementById("abt").value;
        var c = document.getElementById("aby").value;
        var e = document.getElementById("abu").value;
        var d=1;

        self.parent.frames["iframe3"].frames.GetChildValue(v,b,c,d,e);
    }

    function se(obj) {
        var a = obj.name
        if(a == "1"){
            document.getElementById("abu").value = "女鞋";
            document.getElementById("abu").style.display="block";
            document.getElementById("ae").style.display = "block";
        }else if(a == "2"){
            document.getElementById("abu").value = "男鞋";
            document.getElementById("abu").style.display="block";
            document.getElementById("ae").style.display = "block";
        }else if(a == "3"){
            document.getElementById("abu").value = "童鞋";
            document.getElementById("abu").style.display="block";
            document.getElementById("ae").style.display = "block";
        }

        var a = document.getElementById("abr").value;
        var b = document.getElementById("abt").value;
        var c = document.getElementById("aby").value;
        var e = document.getElementById("abu").value;
        var d=1;

        self.parent.frames["iframe3"].frames.GetChildValue(a,b,c,d,e);
    }

    function btn4() {
        document.getElementById("abu").value="";
        document.getElementById("ae").style.display="none";

        var a = document.getElementById("abr").value;
        var b = document.getElementById("abt").value;
        var c = document.getElementById("aby").value;
        var e = document.getElementById("abu").value;
        var d=1;

        self.parent.frames["iframe3"].frames.GetChildValue(a,b,c,d,e);
    }

    function btn1() {
      /*  console.log()*/
        /*var a = document.getElementById("abr").value;*/
        /*console.log(a)*/
        document.getElementById("abb").style.display = "block";
        document.getElementById("abr").value="";
        document.getElementById("ab").style.display="none";

        var a = document.getElementById("abr").value;
        var b = document.getElementById("abt").value;
        var c = document.getElementById("aby").value;
        var e = document.getElementById("abu").value;
        var d=1;

        self.parent.frames["iframe3"].frames.GetChildValue(a,b,c,d,e);
    }

    function btn2() {
       /* console.log()*/
        /*var a = document.getElementById("abt").value;*/
        /*console.log(a)*/
        document.getElementById("abc").style.display = "block";
        document.getElementById("abt").value="";
        document.getElementById("ac").style.display="none";

        var a = document.getElementById("abr").value;
        var b = document.getElementById("abt").value;
        var c = document.getElementById("aby").value;
        var e = document.getElementById("abu").value;
        var d=1;

        self.parent.frames["iframe3"].frames.GetChildValue(a,b,c,d,e);
    }

    function btn3() {
       /* console.log()*/


        document.getElementById("abd").style.display = "block";
        document.getElementById("aby").value="";
        document.getElementById("ad").style.display="none";

        var a = document.getElementById("abr").value;
        var b = document.getElementById("abt").value;
        var c = document.getElementById("aby").value;
        var e = document.getElementById("abu").value;
        var d=1;

        self.parent.frames["iframe3"].frames.GetChildValue(a,b,c,d,e);

    }



   /* var e1 = window.parent.toChildValue1();
    var e2 = window.parent.toChildValue2();
    var e3 = window.parent.toChildValue3();*/

    /*console.log(e1)
    console.log(e2)
    console.log(e3)

    document.getElementById("abr").value = e1;
    document.getElementById("abr").value = e2;
    document.getElementById("abr").value = e3;*/
</script>

<script type="text/javascript">
    //给父页面传数据

</script>
</body>
</html>